<html>
    <title>Schedule-task-Server</title>
    <style>
        html,body {
            width:100%;
            height:100%;
            padding: 10px;
            margin:0px;
            box-sizing:border-box;
            padding-top: 10px;
        }
        body {
            padding-top:60px;
        }
        .base-info {
            position: absolute;
            width: 100%;
            height: 60px;
            top: 0px;
            left: 0px;
            box-sizing: border-box;
            padding: 0px 20px;
        }
        .base-info .app-name {
            float: left;
            font-size: 24px;
            font-weight: 900;
            line-height: 60px;
        }
        .base-info .app-desc {
            float: left;
            font-size: 12px;
            line-height: 80px;
            color: #a9bed5;
            margin-left: 10px;
        }
        .base-info .duration {
            float: right;
            margin-right: 10px;
            text-decoration:underline;
        }
        .main-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow-x: auto;
            padding-right: 20px;
            box-sizing:border-box;
        }
        .panel {
        width: 100%;
        height: auto;
        border: 1px solid #337ab7;
        border-radius: 5px;
        float: left;
        box-sizing: border-box;
        overflow: hidden;
        margin-top: 10px;
        }
        .panel .panel-header {
        width: 100%;
        height: 40px;
        background-color: #337ab7;
        color: #fff;
        padding: 0px 10px;
        line-height: 40px;
        box-sizing: border-box;
        }
        .panel .panel-body {
        width: 100%;
        height: auto;
        min-height: 40px;
        padding: 10px;
        box-sizing: border-box;
        }

        .panel .panel-body .metric{
        width: 100%;
        height: 45px;
        margin-top: 10px;
        float: left;
        }

        .panel .panel-body .metric div {
        width: auto;
        height: auto;
        float: left;
        }
        .name {
        background-color: #777;
        color: #fff;
        border-radius: 5px;
        padding: 2px;
        }
        .value {
            margin-left: 10px;
        }
        .desc-text {
            font-size: 14px;
            color: #a9bed5;
            float:right;
        }
    </style>
    <body>
        <div class='base-info'>
            <span class='app-name'>${appName}</span>
            <span class='app-desc'>${appDesc}</span>
            <span class="app-desc duration">${duration}</span>
        </div>
        <div class="main-container">
            <#if groups??>
                <#list groups as group>
                        <div class='panel'>
                            <div class='panel-header'>
                                ${group.groupName}
                                <#if group.description??>
                                    <span class="desc-text">${group.description}</span>
                                </#if>
                            </div>
                            <div class='panel-body'>
                                <#list group.entries as entry>
                                <div class='metric'>
                                    <div class='name'>${entry.name}</div>
                                    <#if entry.value??><div class='value'> :&nbsp;&nbsp;${entry.value}</div></#if>
                                    <#if entry.unitName??>
                                        <div class='value'>${entry.unitName}</div>
                                    </#if>
                                    <#if entry.description??>
                                        <span class="desc-text">${entry.description}</span>
                                    </#if>
                                </div>
                            </#list>
                        </div>
                    </div>
                </#list>
            </#if>
        </div>
    </body>
</html>